<template>
  <div class="MyNotes" ref="container">
    <div class="bgImg">
      <img src="@as/img/wode_bj.png" alt>
    </div>
    <h3 class="title">我的笔记</h3>
    <mu-tabs :value.sync="tab" @change="tabChange" color="#fff" indicator-color="#F47548" centered fixed-tabs>
      <mu-tab ripple>公开</mu-tab>
      <mu-tab ripple>私密</mu-tab>
    </mu-tabs>
    <Loading v-if="notMore" class="empty-text-wrap"/>
    <mu-load-more :loading="loading" @load="load">
      <div>
        <ul>
          <li v-for="(item,index) in MyNoteList" :key="index">
            <div class="topBar">
              <span class="avatar">
                <img :src="photo" alt="">
              </span>
              <span class="name">{{name}}</span>
              <span class="date">{{item.create_time|dateFilter}}</span>
            </div>
            <div :class="item.content.length>50&&openState[index]=='展开'?'text es':'text'">"{{item.content}}"</div>
            <p class="open" v-if="item.content.length>50" @click="open(index)">{{openState[index]}}</p>
            <div class="content" @click="goStudyInfo(item)">
              <div class="des">
                <img :src="item.info.photo" alt>
                <div>
                  <p>{{item.info.title}}</p>
                  <div>
                    <div>
                      <i class="iconfont iconzuzhi_icon_biaoqian"></i>
                      <span>{{item.status | label}}</span>
                    </div>

                    <div>
                      <i class="iconfont iconxuexi_icon_zhangjie"></i>
                      <span v-if="item.info.chapters_num">共{{item.info.chapters_num}}节</span>
                      <span v-if="item.info.learning_duration">{{item.info.learning_duration|conversionToMinuteC}}</span>
                    </div>

                    <div>
                      <i class="iconfont iconyanjing"></i>
                      <span>{{item.info.study_num}}人学习过</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottomBar">
              <span @click="like(item.id)">
                <img v-if="!item.is_like" src="@as/img/dianzan.png" alt="">
                <img v-if="item.is_like" src="@as/img/dianzan_active.png" alt="">
                <i>{{item.like_numbers}}</i>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </mu-load-more>
    <div class="loading" v-if="loadOver" :class="{'notPageOne':p>1||MyNoteList.length<6}">{{loaded}}</div>
    <!--<div class="qs" v-if="!MyNoteList.length">-->
    <!--<img src="@as/img/quesheng_zanwubiji@2x.png" alt="">-->
    <!--<span>暂无笔记</span>-->
    <!--</div>-->
  </div>
</template>

<script>
    import Loading from '@/components/emptyText.vue';
    export default {
        data() {
            return {
                tab:0,
                refreshing: false,
                loading: false,
                MyNoteList:[],
                name:'',
                photo:'',
                p:1,
                page:6,
                openState:['展开'],
                notMore:false,
                loadOver:false,
                state:0,
            }
        },
        components: {
            Loading
        },
        created() {
            this.name = JSON.parse(Cookies.get('user_71ydj')).name
            this.photo = JSON.parse(Cookies.get('user_71ydj')).photo
            this.getMyNoteList(1)
        },
        mounted() {
        },
        methods: {
            tabChange(e){
                console.log(e)
                if(e==0){
                    this.state=1
                }else{
                    this.state=2;
                }
                this.MyNoteList=[];
                this.p=1;
                this.loading=false;
                this.loadOver =false;
                this.notMore =false;

                this.getMyNoteList(e+1);
            },
            async getMyNoteList(state){
                try {
                    let params = {
                        phone: JSON.parse(Cookies.get('user_71ydj')).phone,
                        state: state,
                        p: this.p,
                        page: this.page
                    }
                    const url = `applets/My/my_note_list`
                    let res = await this.$http.get(url,params)
                    this.loading = false;
                    this.refreshing = false
                    this.$progress.done();
                    // if(!res.data.data.length){
                    //   this.p--
                    //   return
                    // }
                    if(res.code === 200) {
                        console.log(res.data.data.length)
                        if(res.data.data.length){
                            this.MyNoteList.push(...res.data.data);
                            for (let i = 0; i < this.MyNoteList.length; i++) {
                                const e = this.MyNoteList[i];
                                this.openState[i] = '展开'
                            }
                        }
                        this.loadOver = false;
                        if (this.p != 1) {
                            console.log(res.data);
                            if (res.data.data.length) {
                                console.log(res.data)
                            } else {
                                this.loadOver = true;
                                this.loading = false;
                                this.loaded = '没有更多数据了'
                                return false
                            }
                        } else {
                            if (!res.data.data.length) {
                                this.notMore = true;
                                this.loadOver = false;
                            } else {
                                if (res.data.data.length < 6 && res.data.data.length != 0) {
                                    this.loadOver = true;
                                    this.loaded = '没有更多数据了';
                                    this.notMore =false;
                                }
                            }
                        }
                        // else{
                        //     if(this.p==1){
                        //         this.notMore =true;
                        //     }
                        // }

                    }
                } catch(e) {
                    console.log('error:', e)
                }
            },
            refresh() {
                this.refreshing = true
                this.$refs.container.scrollTop = 0
                this.p = 1
                this.getMyNoteList(this.tab+1)
            },
            like(id){
                let params = {
                    phone: JSON.parse(Cookies.get('user_71ydj')).phone,
                    id: id,
                }
                const url = `applets/My/note_like`
                this.$http.post(url,params).then(res=>{
                    // this.getMyNoteList(this.tab+1)
                })
            },
            load() {
                if (!this.loadOver) {
                    this.loading = true;
                    clearTimeout(this.method);
                    this.method = setTimeout(() => {
                        this.p = this.p + 1;
                        this.getMyNoteList(this.state)
                        this.loading = false;
                    }, 500);
                }
                // this.loading = true;
                // this.p++
                // this.getMyNoteList(this.tab+1)
            },
            open(i){
                if(this.openState[i] == '展开'){
                    this.$set(this.openState,i,'收起')
                }else if(this.openState[i] == '收起'){
                    this.$set(this.openState,i,'展开')
                }
            },
            goStudyInfo(v){
                if (v.status == "1") {
                    // return "视频";
                    this.$router.push({ path: '/learn/videoInfo', query: {id: v.info.id, type: v.info.type} })
                }
                if (v.status == "2") {
                    // return "音频";
                    this.$router.push({ path: '/learn/audioInfo', query: {id: v.info.id, type: v.info.type} })
                }
                if (v.status == "3") {
                    // return "专辑";
                    this.$router.push({ path: '/learn/specialInfo', query: {id: v.info.id, type: v.info.type} })
                }
            }
        },
        filters: {
            label: function(v) {
                if (v == "1") {
                    return "视频";
                }
                if (v == "2") {
                    return "音频";
                }
                if (v == "3") {
                    return "专辑";
                }
            }
        }
    }
</script>
<style>
  .MyNotes{
    /*overflow-x: hidden;*/
  }
  .MyNotes .mu-tabs{
    position: relative;
    z-index: 97;
    height: 40px;
    margin-bottom: 15px;
    background-color: transparent !important;
  }
  .MyNotes .mu-tab-link-highlight {
    width:24px !important;
    height:3px;
    background:linear-gradient(235deg,rgba(235,77,68,1),rgba(244,117,72,1));
    border-radius:1PX;
    margin-left: 18px;
  }
  .MyNotes .mu-tab{
    font-size:14px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(51,51,51,.5);
    min-width: 60px;
  }
  .MyNotes .mu-tab-active{
    font-size:18px;
    font-family:PingFang-SC-Medium;
    font-weight:bold;
    color:rgba(51,51,51,1);
  }

</style>
<style lang="scss">
  .MyNotes{
    position: relative;
    .bgImg{
      position: absolute;
      top: 0;
      right: -0px;
      width: 146px;
      height: 141px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .title{
      font-size:28px;
      font-family:PingFang-SC-Bold;
      font-weight:bold;
      color:rgba(51,51,51,1);
      padding: 34px 0 24px;
      padding-left: 13px;
      margin: 0;
    }
    ul{
      width: 100%;
      box-sizing: border-box;
      padding: 0 16px;
      li{
        position: relative;
        background:rgba(255,255,255,1);
        box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.08);
        border-radius:4px;
        margin-bottom: 15px;
        box-sizing: border-box;
        padding: 15px 15px 12px;
        .topBar{
          height: 25px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 3px;
          .avatar{
            display: block;
            width:25px;
            height:25px;
            border-radius:50%;
            overflow: hidden;
            background-color: pink;
            margin-right: 6px;
            img{
              display: block;
              width: 100%;
              height: 100%;
            }
          }
          .name{
            flex:1;
            font-size:12px;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(235,77,68,1);
          }
          .date{
            width:185px;
            font-size:12px;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(102,102,102,1);
            text-align: right;
          }
        }
        .text{
          font-size:14px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(51,51,51,1);
          line-height:24px;
          margin-left: 30px;
          margin-bottom: 5px;
          word-wrap: break-word;
        }
        .text.es{
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        .open{
          text-align: right;
          font-size:14px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(235,77,68,1);
          margin: 10px 0;
        }
        .content{
          width:281px;
          height:87px;
          margin-left: 30px;
          margin-bottom: 12px;
          .des {
            width: 281px;
            height: 87px;
            background:rgba(247,247,247,1);
            border-radius:4px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            img {
              width: 73px;
              height: 62px;
              box-shadow:0px 0px 5px 0px rgba(80,80,80,0.18);
              border-radius:2px;
            }
            & > div {
              width: 178px;
              height: 62px;

              display: flex;
              flex-direction: column;
              justify-content: space-between;
              & > div {
                width: 100%;
                height: 12px;

                display: flex;
                align-items: center;
                justify-content: space-between;
                div {
                  display: flex;
                  align-items: center;
                  span {
                    font-size: 10px;
                    color: #999;
                  }

                  i {
                    font-size: 10px;
                    color: #999;
                    margin: 2px;
                  }
                }
              }
              & > p {
                margin: 0;

                width: 178px;
                height: 32px;
                font-size: 12px;
                color: #666;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }
            }
          }
        }
        .bottomBar{
          display: flex;
          justify-content: flex-end;
          align-items: center;
          span{
            display: inline-block;
            width: 60px;
            font-size:12px;
            text-align: right;
            img{
              width: 12px;
              height: 12px;
              margin-right: 4px;
            }
            i{
              font-style: normal;
              font-size:12px;
              font-family:PingFang-SC-Medium;
              font-weight:500;
              color:rgba(204,204,204,1);
            }
          }
        }
      }
    }
    .qs{
      z-index: 99999;
      height: 100vh;
      width: 100vw;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #fff;
      text-align: center;
      padding-top: 100px;
      img{
        width:100%;
      }
      span{
        position: absolute;
        top: 280px;
        left: 50%;
        transform: translate(-50%);
        font-size:14px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
      }
    }
  }
  .MyNotes .empty-text-wrap {
    width: 100%;
    height: 40vh;
    margin-top: 10vh;
  }
  .MyNotes .loading {
    width: 100%;
    font-size: 14px;
    color: #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
    &.notPageOne {
      margin-top: -40px;
    }
  }
  .mu-load-more /deep/ .mu-circle-spinner{
    border-color: #e5e5e5;
  }
  .MyNotes /deep/.mu-elevation-1{
    box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
    -webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
  }
</style>
